<template>
  <div class="chartName">
    <div class="tiao"></div>
    <div>{{ title }}</div>
  </div>
  <div class="table">
    <vxe-grid v-bind="gridOptions">
    <template #pager>
      
      <vxe-pager
        :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
        v-model:current-page="tablePage.currentPage"
        v-model:page-size="tablePage.pageSize"
        :total="tablePage.total"
        @page-change="handlePageChange">
      </vxe-pager>
    </template>
  </vxe-grid>
  </div>
  
</template>

<script setup>
import { reactive } from 'vue'
defineProps({
  title: {
    type: String,
    },
    
});
const tablePage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10
})
const gridOptions = reactive({
  border: true,
  loading: false,
  columnConfig: {
    resizable: true
  },
  data: [],
  columns: [
    { type: 'seq', title: '排行' , width: 125 },
    { field: 'name', title: '姓名' , width: 125 },
    { field: 'bumen', title: '部门' , width: 125},
    { field: 'ztjl', title: '总调剂量' , width: 125},
    { field: 'rqtj', title: '日期调剂', width: 125}
  ]
})
const findList = () => {
  gridOptions.loading = true
  setTimeout(() => {
    gridOptions.loading = false
    tablePage.total = 10
    gridOptions.data = [
      { id: 10001, name: 'Test1', bumen: 'T1', ztjl: '1', rqtj: 28 },
      
    ]
  }, 300)
}

const handlePageChange = ({ currentPage, pageSize }) => {
  tablePage.currentPage = currentPage
  tablePage.pageSize = pageSize
  findList()
}
findList()
</script>

<style scoped>
.chartName {
  font-size: 20px;
  color: #1b1b1b;
  display: flex;
  margin-top: 20px;
  margin-left: 30px;
  padding-bottom: 10px;
}

.tiao{
    width: 4px;
    height: 20px;
    margin-right: 9px;
    background-color: #945635;
    margin-top: 5px;
  }
  .table{
    padding-left: 20px;
    padding-right: 20px;
  }
</style>